<template>
  <div class="pie-data" :style="{width:pSize}">

    <div class="pie" :style="{'background-color' : color , 'border' : '1px solid ' + borderColor , width:pSize,height:pSize}">
      <div class="pie-s" :style="{'border' : '1px solid ' + borderColor , width:psSize,height:psSize}">
        <span>
          <slot></slot>
        </span>
      </div>
    </div>
    <p v-if="text != ''" class="pie-data-text">{{text}}</p>
  </div>
</template>

<script>
    export default {
      name: "pie-data",
        data : function(){
          return {
            color: null,
            borderColor : null,
            pSize : '80px',
            psSize : '50px',
            colorData : {
              default : '#e8e8e8',
              primary : '#409eff',
              success : '#67c23a',
              info : '#909399',
              warning : '#e6a23c',
              danger : '#f56c6c'
            }
          }
        },
        methods : {

        },
        mounted : function(){
          if(this.type == 'default'){
            this.color = this.colorData[this.type];
            this.borderColor = '#eee';
          }else{
            this.color = this.colorData[this.type];
            this.borderColor = this.colorData[this.type];
          }

          if(this.bgColor != null){
            this.color = this.bgColor;
            this.borderColor = this.bgColor;
          }
        },
        watch : {
          bgColor:function(){
            this.color = this.bgColor;
            this.borderColor = this.bgColor;
          }
        },
        props : {
          type : {
            type : String,
            required : false,
            default : function(){
              return "default";
            }
          },
          text : {
            type : String,
            required : false
          },
          bgColor : {
            type : String,
            required : false,
            default :function(){
              return null;
            }
          }
        }
    }
</script>

<style scoped>
  .pie{border-radius: 50%;display: flex;justify-content: center;align-items: center;}
  .pie-s{background-color: white;border-radius: 50%;display: flex;justify-content: center;align-items: center;}
  .pie-s span{display: inline-block;font-weight: bold;}
  .pie-data-text{text-align: center;}

</style>
